<template>
  <div class="flex-1 overflow-auto">
    <a-table
      @change="pageChange"
      table-layout="fixed"
      sticky
      :pagination="{
        pageSize: codeTable.query.pageSize,
        current: codeTable.query.pageNum,
        total: codeTable.query.total,
      }"
      :row-selection="{
        selectedRowKeys: codeTable.keys,
      }"
      :custom-row="customRow"
      :rowKey="codeTable.rowKey"
      :columns="formatColumns(codeColumns)"
      :data-source="codeTable.data"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'operation'">
          <a-dropdown-button trigger="click" @click="editTable(record.tableId)">
            <EditOutlined />
            <template #overlay>
              <a-menu>
                <a-menu-item @click="asyncTable(record.tableName)">同步</a-menu-item>
                <a-menu-item @click="deleteTable(record.tableId)">删除</a-menu-item>
              </a-menu>
            </template>
          </a-dropdown-button>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { formatColumns } from '@/utils/table/table';
import type { TablePaginationConfig } from 'ant-design-vue';
import { codeColumns } from '../data/column';
import { asyncTable, codeList, deleteTable, editTable } from '../data/curd';
import { currentCode } from '../data/form';
import { codeTable } from '../data/table';

const pageChange = (pagination: TablePaginationConfig) => {
  codeTable.value.query.pageNum = pagination.current!;
  codeTable.value.query.pageSize = pagination.pageSize!;
  codeList();
};

const customRow = (record: SystemTable) => {
  return {
    onClick() {
      codeTable.value.keys = [record.tableId];
      currentCode.value = record;
    },
  };
};

onMounted(() => {
  codeList();
});
</script>

<style lang="scss" scoped>
.overflow-auto {
  overflow-y: auto;
}
</style>
